<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/vue.js"></script>
    <link rel="stylesheet" href="/static/index.css">
    <script src="/static/index.js"></script>
    <script src="/static/axios.min.js"></script>
</head>
<body>
<div id="box">
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
        <el-form-item label="商品名称">
            <el-input v-model="searchData.goods_name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
            <el-select v-model="searchData.cate_id"  placeholder="商品分类">
                <el-option label="家用电器" value="1"></el-option>
                <el-option label="手机" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜素</el-button>
        </el-form-item>
    </el-form>

    <template>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="goods_name"
                    label="商品名称"
                    width="180">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="look(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="editor(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <div>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="searchData.limit"
                :page-count="pageCount"
                @current-change="page"
                @prev-click="page"
                @click="page"
        >
        </el-pagination>
    </div>
</div>

<script>
    new Vue({
        el:"#box",
        data:{
            tableData: [],
            searchData:{
                cate_id:'请选择分类',
                goods_name:'',
                page:1,
                limit:2,
            },
            total:0,
            pageCount:0,
        },
        created(){
            this.getList()
        },
        methods:{
            // 列表
            getList:function () {
                let that = this;
                console.log(this.tableData)
                axios.get('http://www.weektest.com/api/goods',{params:this.searchData}).then(function (response) {
                    that.total = response.data.data.total;
                    that.total = response.data.data.last_page;
                    that.tableData = [];
                    for (let v in response.data.data.data) {
                        that.tableData.push(response.data.data.data[v])
                    }
                    console.log(that.total)
                }).catch(function (error) {
                    console.log(error)
                })
            },
            //搜索
            search:function () {
                axios.get('http://www.weektest.com/api/goods',{params:this.searchData}).then(function (response) {
                    console.log(response);
                }).catch(function (error) {
                    console.log(error)
                })
            },
            //上一页
            page:function (p) {
                this.searchData.page = p;
                this.getList()
            },
            //删除
            del:function (item) {
                console.log(item.id);
            },
            // 编辑
            editor:function (item) {
                console.log(item.id);
            },
            // 查看
            look:function (item) {
                console.log(item.id);
            }
        }
    });
</script>
</body>
</html>